<template>
  <div style="width: 128px">
    <a-menu
      :default-selected-keys="defaultSelectedKeys"
      :default-open-keys="defaultOpenKeys"
      mode="inline"
      :inline-collapsed="collapsed"
      @click="handleClick"
    >
      <template v-for="item in subMenus">
        <template v-if="item.is_hidden === 1"></template>
        <a-menu-item v-else-if="!item.children" :key="item.url">
          <span> {{ item.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.url" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SubMenu from './SubMenu'
export default {
  components: {
    'sub-menu': SubMenu
  },
  data() {
    return {
      collapsed: false
    }
  },
  computed: {
    ...mapGetters({
      subMenus: 'menus/subMenus',
      defaultSelectedKeys: 'menus/defaultSelectedKeys',
      defaultOpenKeys: 'menus/defaultOpenKeys'
    })
  },
  methods: {
    handleClick(e) {
      // console.log('click', e.key)
      this.$router.push({ path: e.key })
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    }
  }
}
</script>
